// 小程序自定义组件，通过 Component 构造
Component({
  data: {
    selectedIndex: 0,
    list: [
      {
        id: "001",
        text: "电影",
        pagePath: "/pages/films/films",
        iconPath: "/static/icon_tab1.png",
        selectedIconPath: "/static/icon_tab1_active.png",
      },
      {
        id: "002",
        text: "影院",
        pagePath: "/pages/cinemas/cinemas",
        iconPath: "/static/icon_tab2.png",
        selectedIconPath: "/static/icon_tab2_active.png",
      },
    ],
  },

  methods: {
    onTap(event) {
      const { index } = event.currentTarget.dataset;
      console.log("index", index);
      // 根据 index 修改 selectedIndex
      // this.setData({ selectedIndex: index });

      // 根据 index 找到 list 中的元素
      const tab = this.data.list[index];
      wx.switchTab({
        url: tab.pagePath,
      });

      // 自定义 TabBar 的高亮问题
      //    是什么？
      //      切换之后，高亮有bug
      //    为什么？
      //      多个TabBar页面下的自定义TabBar组件并不是同一个实例，而是单独的实例对象
      //    怎么解决？
      //      在TabBar页面，通过 getTabBar 方法获取到该页面下的自定义TabBar组件的实例之后，再修改它。

      // 自定义 TabBar 的闪烁问题
      //    是什么?
      //      第一次切换时，图片闪烁问题
      //    为什么？
      //      图片加载是需要时间的。第一次的时候还没有缓存上该图片导致的。
      //    怎么解决?
      //      1. 找产品沟通，没啥好方法
      //      2. 将图片提前加载一下

      // 自定义 TabBar 被小横条挡住的问题  【网页通用问题】
      //      是什么?
      //          从 IphoneX 开始，手机底部会有一个小横条
      //      怎么解决？
      //          添加一段 css 即可。
      //          padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
      //          padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    },
  },
});
